<template>
  <view class="container">
    <view class="header">
      <view class="back-arrow" @click="onBack" />
      <text class="title">
        欠款列表
      </text>
      <view class="collection-text" @click="onCollectionDoc">
        <image src="@/static/images/pyq.png" class="pyq-icon" />
        <text>催收文案</text>
      </view>
    </view>

    <view class="search-bar">
      <view class="search-icon" />
      <input v-model="keyword" class="search-input" placeholder="搜索买家名称或手机号" confirm-type="search" @confirm="onSearch">
      <view class="filter" @click="toggleFilter">
        <image class="filter-icon" src="@/static/images/filter.png" />
      </view>
    </view>

    <view class="summary">
      <text class="owe-count">
        总赊欠：{{ formatNumber(totalOwe) }}，共{{ buyers.length }}人赊欠
      </text>
    </view>

    <scroll-view class="buyer-list" scroll-y :scroll-with-animation="true" @scrolltolower="onLoadMore"
      @pull-down-refresh="onPullDown">
      <view v-for="(buyer, index) in buyers" :key="index" class="buyer-item">
        <view class="row1">
          <view class="buyer-left">
            <text class="buyer-name">
              {{ buyer.name }}
            </text>
            <text v-if="buyer.phone" class="buyer-phone">
              {{ buyer.phone }}
            </text>
          </view>
          <button class="share-btn" @click="onShare(buyer)">
            <image class="share-icon" src="@/static/images/share.png" />
            <text class="share-text">
              分享
            </text>
          </button>
        </view>
        <view class="row2">
          <text class="owe-limit">
            赊欠限制：
            <text v-if="buyer.oweLimit === 0">
              0元
            </text>
            <text v-else-if="buyer.oweLimit">
              {{ buyer.oweLimit }}元
            </text>
            <text v-else>
              未限制
            </text>
            <text v-if="buyer.limitDay">
              {{ buyer.limitDay }}天
            </text>
          </text>
        </view>
        <view class="row3">
          <view class="left-part">
            <text class="owe-amount">
              已赊欠：{{ formatNumber(buyer.oweAmount) }}元
            </text>
            <text class="owe-days" :class="getOweDaysClass(buyer.oweDays)">
              {{ buyer.oweDays }}天
            </text>
          </view>
          <view class="detail" @click="goDetail(buyer)">
            <text class="detail-text">
              详情
            </text>
            <image class="right-icon" src="@/static/images/report/right.png" />
          </view>
        </view>
      </view>
    </scroll-view>

    <view v-if="showFilter" class="filter-overlay" @click.self="toggleFilter" />
    <FilterPopup :show="showFilter" :sortList="sortList" :currentSort="currentSort" :filterOptions="filterOptions"
      @update:show="showFilter = $event" @confirm="onConfirm" @reset="onReset" @selectSort="selectSort"
      @toggleOption="toggleOption" />
  </view>
</template>

<script setup lang="ts">
import FilterPopup from '@/components/FilterPopup.vue';
import { ref } from 'vue';

interface Buyer {
  name: string;
  phone?: string;
  oweLimit?: number | string;
  limitDay?: number | string;
  oweAmount: number;
  oweDays: number;
}

const keyword = ref('');
const totalOwe = ref(643292);
const buyers = ref<Buyer[]>([
  {
    name: '临时买家',
    oweLimit: 3000,
    limitDay: 60,
    oweAmount: 75578,
    oweDays: 55,
  },
  {
    name: '张三',
    phone: '17720498851',
    oweLimit: '未限制',
    limitDay: 60,
    oweAmount: 75578,
    oweDays: 3,
  },
  {
    name: '张三',
    phone: '17720498851',
    oweLimit: 3000,
    limitDay: '未限制',
    oweAmount: 75578,
    oweDays: 3,
  },
  {
    name: '张三',
    oweLimit: 3000,
    limitDay: 60,
    oweAmount: 75578,
    oweDays: 3,
  },
]);

const showFilter = ref(false);
const sortList = ref([
  '按赊欠金额从大到小',
  '按赊欠金额从小到大',
  '按赊欠金额从小到大',
  '按赊欠金额从小到大',
  '按赊欠金额从小到大',
]);
const currentSort = ref(0);
const filterOptions = ref([
  {
    label: '买家今日有无赊欠',
    btns: [
      { text: '有', active: true },
      { text: '无', active: false },
    ],
  },
  {
    label: '买家今日有无赊欠',
    btns: [
      { text: '是', active: true },
      { text: '否', active: false },
    ],
  },
  {
    label: '买家今日有无赊欠',
    btns: [
      { text: '是', active: false },
      { text: '否', active: true },
    ],
  },
]);

function onBack() {
  uni.navigateBack();
}
function onCollectionDoc() {
  console.log('催收文案');
}
function onSearch() {
  console.log('搜索:', keyword.value);
}
function toggleFilter() {
  showFilter.value = !showFilter.value;
}
function formatNumber(num: number) {
  return num.toLocaleString();
}
function getOweDaysClass(days: number) {
  if (days > 30) return 'owe-days-red';
  return 'owe-days-normal';
}
function onPullDown() {
  console.log('下拉刷新');
}
function onLoadMore() {
  console.log('上拉加载更多');
}
function onShare(buyer: Buyer) {
  console.log('分享:', buyer);
}
function goDetail(buyer: Buyer) {
  console.log('详情:', buyer);
}
function selectSort(idx: number) {
  currentSort.value = idx;
}
function toggleOption(i: number, j: number) {
  filterOptions.value[i].btns.forEach((btn, index) => {
    btn.active = index === j;
  });
}
function onReset() {
  currentSort.value = 0;
  filterOptions.value.forEach((item) => {
    item.btns.forEach((b, idx) => (b.active = idx === 0));
  });
}
function onConfirm() {
  showFilter.value = false;
  console.log('当前排序:', sortList.value[currentSort.value]);
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.back-arrow {
  position: absolute;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  background: url("@/static/images/back.png") no-repeat center;
  background-size: contain;
}

.title {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.collection-text {
  position: absolute;
  right: 20rpx;
  font-size: 28rpx;
  color: #007aff;
  display: flex;
  align-items: center;
}

.pyq-icon {
  width: 32rpx;
  height: 32rpx;
  margin-top: 4rpx;
  margin-right: 4rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  height: 80rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  background: url("@/static/images/search.png") no-repeat center;
  background-size: contain;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  font-size: 24rpx;
  border: none;
  outline: none;
}

.filter {
  width: 40rpx;
  height: 40rpx;
  margin-left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-icon {
  width: 32rpx;
  height: 32rpx;
}

.summary {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.owe-count {
  font-size: 28rpx;
  color: #333;
}

.buyer-list {
  flex: 1;
}

.buyer-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.buyer-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.buyer-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 700;
  margin-right: 10rpx;
}

.buyer-phone {
  font-size: 24rpx;
  color: #999;
}

.share-btn {
  display: flex;
  align-items: center;
  border: 1rpx solid #07c160;
  border-radius: 6rpx;
  padding: 6rpx 14rpx;
  background-color: #07c160;
  color: #fff;
  font-size: 24rpx;
}

.share-icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 6rpx;
}

.share-text {
  font-size: 24rpx;
}

.row2 {
  margin-bottom: 10rpx;
}

.owe-limit {
  font-size: 24rpx;
  color: #666;
}

.row3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-part {
  display: flex;
  align-items: center;
}

.owe-amount {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.owe-days {
  font-size: 24rpx;
  padding: 0 8rpx;
  border-radius: 4rpx;
}

.owe-days-normal {
  background-color: #f0f0f0;
  color: #666;
}

.owe-days-red {
  background-color: #fce2e2;
  color: #ff4949;
}

.detail {
  display: flex;
  align-items: center;
}

.detail-text {
  font-size: 24rpx;
  color: #333;
  margin-right: 6rpx;
}

.right-icon {
  width: 28rpx;
  height: 28rpx;
}

.filter-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease-in-out;
}

.slide-up-enter {
  transform: translateY(100%);
}

.slide-up-leave-to {
  transform: translateY(100%);
}

.filter-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.arrow-double-down-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  background: url("@/static/images/arrow-double-down.png") no-repeat center;
  background-size: contain;
}

.filter-content {
  padding: 20rpx;
}

.filter-title {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.title-line-green {
  width: 6rpx;
  height: 32rpx;
  background-color: #07c160;
  margin-right: 10rpx;
  border-radius: 2rpx;
}

.title-line-blue {
  width: 6rpx;
  height: 32rpx;
  background-color: #007aff;
  margin-right: 10rpx;
  border-radius: 2rpx;
}

.sort-cards {
  margin-bottom: 20rpx;
}

.sort-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.25);
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.sort-card-active {
  background: #43cf7c;
  box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.25);
}

.sort-text {
  font-size: 24rpx;
  color: #333;
}

.check-icon {
  width: 26rpx;
  height: 26rpx;
  margin-left: 10rpx;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.filter-label {
  font-size: 24rpx;
  color: #333;
}

.option-group {
  display: flex;
}

.option-btn {
  border: 1rpx solid #07c160;
  border-radius: 6rpx;
  padding: 4rpx 14rpx;
  font-size: 24rpx;
  color: #07c160;
  margin-left: 20rpx;
}

.option-btn-active {
  background-color: #07c160;
  color: #fff;
}

.filter-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.reset-btn {
  width: 45%;
  text-align: center;
  background-color: #fff;
  border: 1rpx solid #ff8c00;
  color: #ff8c00;
  font-size: 24rpx;
  padding: 12rpx 0;
  border-radius: 8rpx;
}

.confirm-btn {
  width: 45%;
  text-align: center;
  background-color: #07c160;
  color: #fff;
  font-size: 24rpx;
  padding: 12rpx 0;
  border-radius: 8rpx;
}
</style>
